<template>
    <div class="seller-shop-container">
        <div class="seller-shop-header">
            商店信息
        </div>
        <div class="seller-shop-content">
            <el-form v-if="nowShop !== null">
                <el-form-item label="商店名称" :label-width="formLabelWidth">
                    <el-input size="large" type="text" :placeholder="nowShop.name" :disabled="true">
                    </el-input>
                </el-form-item>
                <el-form-item label="商店描述" :label-width="formLabelWidth">
                    <el-input size="large" type="text" :placeholder="nowShop.description" :disabled="true">
                    </el-input>
                </el-form-item>
                <el-form-item label="商店地址" :label-width="formLabelWidth">
                    <el-input size="large" type="text" :placeholder="nowShop.address" :disabled="true">
                    </el-input>
                </el-form-item>
            </el-form>
            <el-form v-if="nowShop === null" ref="addShopForm" :model="addShopForm">
                <el-form-item label="商店名称" :label-width="formLabelWidth" prop="name">
                    <el-input size="large" type="text" v-model="addShopForm.name" placeholder="请填写商店名称">
                    </el-input>
                </el-form-item>
                <el-form-item label="商店描述" :label-width="formLabelWidth" prop="description">
                    <el-input size="large" type="text" v-model="addShopForm.description" placeholder="请填写商店描述">
                    </el-input>
                </el-form-item>
                <el-form-item label="商店地址" :label-width="formLabelWidth" prop="address">
                    <el-input size="large" type="text" v-model="addShopForm.address" placeholder="请填写详细商店地址">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button style="width:50%;" size="large" type="primary" @click="addShop">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
  
<script>
import { mapGetters, mapActions } from 'vuex'
import shopService from 'services/shopService.js'
import * as notifyUtil from 'utils/notifyUtil.js'

export default {
  data() {
    return {
      formLabelWidth: '120px',
      addressPredix: '',
      addShopForm: {
        name: '',
        address: '',
        description: '',
        longitude: 0,
        latitude: 0
      },
      shopTableData: []
    }
  },
  computed: mapGetters({
    nowUser: 'nowUser',
    nowShop: 'nowShop'
  }),
  methods: {
    ...mapActions({
      setNowShop: 'setNowShop'
    }),
    setShopTableData() {
      this.shopTableData.push(this.nowShop)
    },
    addShop() {
      let shopAdded = {
        userid: this.nowUser.id,
        name: this.addShopForm.name,
        address: this.addressPredix + this.addShopForm.address,
        description: this.addShopForm.description,
        longitude: parseFloat(this.addShopForm.longitude),
        latitude: parseFloat(this.addShopForm.latitude)
      }
      shopService.addShop(shopAdded).then(response => {
        if (response.data.id === null || response.data.id === undefined) {
          notifyUtil.showError('添加商店信息失败', '服务器错误')
        } else {
          notifyUtil.showInfo('添加商店信息成功', '前去管理您的商店吧')
          this.getShopByUserId()
        }
      })
    },
    getShopByUserId() {
      shopService.getShopByUserId(this.nowUser.id).then(response => {
        if (response.data.Shop === null || response.data.Shop === undefined) {
          this.setNowShop(null)
          notifyUtil.showInfo('查找商店失败', '暂未开店')
        } else {
          let nowShop = response.data.Shop[0]
          this.setNowShop(nowShop)
        }
      })
    }
  },
  mounted() {
    this.setShopTableData()
  }
}
</script>
  
<style scoped>
.seller-shop-container {
  margin-top: 30px;
  width: 1070px;
  height: 600px;
  float: left;
  /* bottom: 30px; */
  /* text-align: left; */
  /* border: 1px solid #DCDFE6; */
  background-color: #ffffff;
}
.seller-shop-header {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  padding-bottom: 10px;
  text-align: left;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid #dcdfe6;
}
.seller-shop-content {
  width: 600px;
  margin-top: 50px;
  margin-left: 20px;
  margin-right: 20px;
  padding-bottom: 10px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  /* font-size: 18px; */
  /* font-weight: 700; */
  /* border-bottom: 1px solid #DCDFE6; */
}
.el-input .el-select {
  width: 130px;
}
</style>
  

